<template>
	<view v-if="info.id">
		<view
			style="background: linear-gradient(180deg,#5A53CE, #5A53CE);display: inline-block;width: 750rpx;min-height: 100vh">

			<u-navbar :border-bottom="false" :is-back="false" title=" " :background="{background:'#5A53CE'}">
				<view slot="left">
					<view @click="topCheck" class="u-flex"
						style="font-size: 24rpx; color: #fff;margin-left: 20rpx;border: 1rpx solid #fff;border-radius: 40rpx;padding: 5rpx 30rpx;">
						<view style="margin-right: 20rpx;">切换门店</view>
						<u-image src="/static/changStore.png" width="40" height="40"></u-image>
					</view>
				</view>
			</u-navbar>


			<view style="width: 700rpx;margin:40rpx auto;">
				<u-image :src="info.cover" height='360'></u-image>
			</view>


			<view class="" style="padding: 0 30rpx 0rpx 30rpx;">
				<view class="u-flex u-margin-bottom-10">
					<view style="color: #fff;font-size: 36rpx;font-weight: bold;margin-right: 20rpx;">{{info.storeName}}
					</view>
					<view>
						<u-button :custom-style="{background:'#62C137',color:'#fff',}" :hair-line="false" size="mini">
							营业中
						</u-button>
					</view>
				</view>
				<view class="u-flex u-row-between" style="color: #fff;font-size: 22rpx;">
					<view>{{info.address}}</view>
					<view class="u-font-22 u-flex u-margin-top-20 " @click.stop="openmap(info)">
						<u-icon name='map'></u-icon>
						<view> {{info.distance}}</view>
					</view>
				</view>
			</view>

			<u-tabs :list="nav" :current="current" @change="change" bg-color='transparen' active-color="#fff"
				inactive-color="#fff"></u-tabs>

			<view class="u-flex u-row-between" style="flex-wrap: wrap;width:700rpx;margin:auto">
				<view v-for="(item,index) in tableList" :key="index">
					<view v-if="tableList.length" :style="{
							position: 'relative',
							width: !current?'292rpx':'256rpx',
							height:  !current?'188rpx':'256rpx',
							backgroundSize: 'cover',
							backgroundImage:'url('+$ftpUrl(
							!item.status?(!current?'/longdesk-n.png':'/sdesk-n.png'):
							item.status==1?(!current?'/longdesk-s.png':'/sdesk-s.png'):
							item.status==2?(!current?'/longdesk-g.png':'/sdesk-g.png'):
							'')
							+')'
						}" class="u-padding-20 u-margin-top-20 ">
						<view style="position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%)">
							<view class="u-text-center "
								style="color: #fff;font-size: 30rpx;font-weight: bold; ">
								{{item.carportName}}
							</view>
							<view>
								<view  v-if="item.status==1" class="tableBlock"
									style="background: #E7463B;">
									使用中  </view>
								<view v-if="item.status==3" class="tableBlock" style="background: #b5ccf9;">
									待开放</view>
								<view v-if="!item.status" class="tableBlock" style="background: #7DE354;"
									@click='openDesk(item)'>
									空闲中</view>
								<view v-if="item.status==2" class="tableBlock" style="background: #F9A825;">
									维修中</view>
							</view>
						</view>
					</view>

					<view class="u-margin-top-20 u-text-center">
						<view v-if="!item.status && !item.isAppointment" class="tableBlock"
							style="border: 1rpx solid #7BD166;color:#7BD166;border-radius: 40rpx;"
							@click='openDesk(item)'>去开台
						</view>
						<view v-if="item.status==1" class="tableBlock"  style="border: 1rpx solid #DB647E;color:#DB647E;border-radius: 40rpx;">
							 <text v-if="item.useTime">已开{{item.useTime}}</text>
							  <text v-if="item.minutes">(共{{item.minutes}}分钟)</text>
						</view>
						
						<view v-if="item.isAppointment" class="tableBlock"  style="border: 1rpx solid #f4cc00;color:#f4cc00;border-radius: 40rpx;">
							 预约订单 <text v-if="item.minutes">(共{{item.minutes}}分钟)</text>
							 <!-- <u-count-down :timestamp="item.updateTime+36000/2-Math.floor(Date.now())/60"></u-count-down> -->
						</view>
					</view>
				</view>
			</view>
		</view>


		<u-popup v-model="show" mode='center'>
			<view style="background: #fff;width: 700rpx;margin: auto;">

				<tags :user='user' :info='info' :tableInfo='tableInfo' @ok='SureTags' @endTable='endTable' v-if="show">
				</tags>
			</view>
			<!-- <charge></charge> -->

		</u-popup>

		<wr-state ref='mask' icon='checkmark-circle-fill' iconcolor='#52C41A' tags=' ' content="开台成功" @ready='ready'>
		</wr-state>
<u-toast ref="uToast" />
	</view>
</template>

<script>
	// item1.status==2?'维护中'
	// item1.status==0?'空闲中'
	// item1.status==1?`已使用时间`
	// item1.status==3?'装修中'
	import list from './components/list.vue'
	import charge from '../scan/components/charge.vue';
	import tags from '../scan/components/tags.vue'
	import wxpay from '@/common/wxpay.js'
	import wxLocation from '@/common/location.js';
	export default {
		components: {
			list,
			charge,
			tags
		},
		data() {
			return {
				show: false,
				tableList: [],
				nav: [{
						name: '台球'
					},
					{
						name: '棋牌'
					},
				],
				current: 0,
				id: '',
				info: {},
				list: [],
				tableInfo: {},
				user: ''

			}
		},

		onLoad(options) {
			if (options.id) {
				this.id = options.id;

			}
			this.getUser()
		},
		onShow() {
			this.show = false;
			this.storeDetail()
			this.getCarport()
		},
		methods: {
			topCheck() {
				uni.navigateBack({
					delta: 1,
					success: () => {

					},
					fail: () => {
						uni.redirectTo({
							url: "/pages/store/index"
						})
					}
				})
			},

			getUser() {
				this.$u.api.userInfo().then(res => {
					this.user = res;
				})
			},
			change(e) {
				this.current = e;
				this.getCarport()
			},
			storeDetail() {

			if(!this.$store.state.userAddress){
								
								const wx = new wxLocation();
								wx.getAddress().then(res => {
									this.$u.post('/index/storeDetail', {
										store_id: this.id,
										lat: res.result.location.lat,
										lng: res.result.location.lng,
									}).then(res => {
										this.list = [res];
										this.info = res;
										resolve(res)
									})
								}).catch(err => {
								
								})
							}else{
								this.$u.post('/index/storeDetail', {
									store_id: this.id,
									lat: this.$store.state.userAddress.result.location.lat,
									lng: this.$store.state.userAddress.result.location.lng,
								}).then(res => {
									this.list = [res];
									this.info = res;
								})
								
							}
							

			},
			getCarport() {
				this.$u.post('/index/carport', {
					store_id: this.id,
					type: this.current ? 2 : 1
				}).then(res => {
					this.tableList = res;

				})

			},

			SureTags(e) {
				this.$u.post('/indent/orderStart', {
					carport_id: e,
				}).then(res => {
					if (Array.isArray(res)) {
						uni.showModal({
							title: '确认开台吗',
							success: (res1) => {
								if (res1.confirm) {
									this.openDesk({
										id: e
									})
									this.$refs.mask.show = true
								}
							}
						})
					} else {
						const wx = new wxpay(res);
						wx.pay().then(res => {
							this.openDesk({
								id: e
							})
							this.$refs.mask.show = true
						}).catch(err => {})
					}

				})
			},
			endTable(e) {
				uni.navigateTo({
					url: '/pages/scan/total?id=' + e
				})
				this.show = false
			},
			
			openmap(item) {
			
				var lat = item.lat
				var lng = item.lng
				var name = item.storeName
			
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lng),
					name: name
			
				})
			},
			openDesk(item) {
				item.store_id=this.id;
				item.current=this.current;
				// uni.navigateTo({
				// 	url: '/pages/store/stareDetail?item=' +  encodeURIComponent(JSON.stringify(item)),
				// })
				
				uni.navigateTo({
					url:"/pages/store/stareDetail?sid="+this.id+"&cid="+item.id
				})
				
				
				// this.$u.post('/indent/orderStart', {
				// 	carport_id: item.id,
				// }).then(res => {
				// 		const wx = new wxpay(res);
				// 		wx.pay().then(res => {
				// 			this.$refs.uToast.show({
				// 				title: '开台成功',
				// 				type: 'success',
				// 				callback: () => {
				// 					this.getCarport()
				// 				}
				// 			})
				// 		}).catch(err => {
				// 		})
				// })
			}
		},
	}
</script>

<style>
	.tableBlock {
		margin: auto;
		border-radius: 10rpx;
		min-width: 120rpx;
		text-align: center;
		font-size: 20rpx;
		color: #fff;
		margin-top: 10rpx;
		padding: 5rpx;
		display: inline-block;

	}
</style>